<template>
	<view class="bg-white flex flex-direction" style="height: 100vh;">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<text>草稿箱</text>
			</block>
		</cu-custom>
		<view class="flex  align-center justify-center  padding-lr-xl margin-top-xs margin-bottom-xs">
			<view @click="switchTab(index)"  v-for="(item,index) in tablist" :key="index" class="flex-sub" style="text-align: center;font-size: 32rpx;font-weight: 600;" :style="[{'color':current==index?'blue':''}]">
				{{item.name}}
			</view>
		</view>
        <!-- 轮播展示 -->
		<swiper class="margin flex-sub" @change="handleChange" :current="current" style="touch-action: none;">
			<!-- 讲书 -->
			<swiper-item v-for="(item,num) in tablist" :key="num">
				<view class="flex margin-bottom-xl"  v-for="(draft,index) in bookDrafts" :key="index" @click="createArticle(draft)">
					<view  class="margin-right" >
						<image :src="draft.cover" mode="aspectFit" style="height: 320rpx;width: 250rpx;"> </image>
					</view>
					<view class="flex flex-direction" style="position: relative; width: 400rpx;">
						<view style="font-weight: 600; margin-bottom: 30rpx; margin-top: 2rpx;" >{{draft.title}}</view>
						<rich-text :nodes="draft.content" style="overflow: hidden;display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1 " ></rich-text>
						<!-- 时间 -->
						<view style="position: absolute;bottom: 2%;">
						<view >{{draft.gmtCreate}}</view>
						</view>
						<!-- 删除 -->
						<view style="position: absolute;bottom: 2%; right: 0; ">
						<button class="cu-btn block bg-gradual-green " style="font-size: 34rpx;width: 55rpx;height: 45rpx;" @click.stop="deleteDraft(index)">
							<text class="cuIcon-delete text-white"></text>
						</button>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- 课程 -->
		</swiper>
	</view>
</template>

<script>
	import column from '../../components/column/column.vue'
	export default{
		data(){
			return{
				current:0,
				bookDrafts:[

				],
				tablist: [{
							name: '文章'
						},
						{
							name: '课程'
						},
						{
							name: '讲书'
						},
					],
					
				}
			},
		onLoad() {
		   this.$http.get('/edu/article/getDraftList/'+this.$store.getters.userid).then(res =>{
			   this.bookDrafts=res.data.result
			   this.bookDrafts.forEach(item =>{
					item.cover=item.cover? item.cover:"https://z3.ax1x.com/2021/06/09/26WkTA.jpg"//显示无图片封面
			        item.title=item.title? item.title:"（未填写标题）"
					item.content=item.content?item.content:"<p>（未填写内容）</p>"
			   })
		   })
		},
		methods:{
			handleChange(e){
				this.current=e.detail.current
				
			},
			switchTab(index){
				this.current=index			
			},
			deleteDraft(index){
				this.$http.delete('/edu/article/deleteArticle/'+this.bookDrafts[index].id).then(res =>{
					console.log(res)
					if(res.data.success){
						this.bookDrafts.splice(index,1)
						this.$tip.success('删除成功')
					}
				})
			},
			createArticle(item){
				//修改需要传给下一个页面的数据
				let draft =JSON.parse(JSON.stringify(item))
				draft.cover= draft.cover=="https://z3.ax1x.com/2021/06/09/26WkTA.jpg"?'':draft.cover
				draft.title= draft.title=="（未填写标题）"?'':draft.title
				draft.content=  draft.content=="<p>（未填写内容）</p>"?'':draft.content
				console.log('draft:',draft)
				// console.log('item:',item)
				this.$Router.push({name:'createArticle',params:{draft}})
			}
		}	
	}
</script>

<style>
</style>
